<template>
  <div class="app-container">
    <div class="app-top">
      <div class="input-line">
        <span class="input-label">服务器名称：</span>
        <el-input v-model="tableParam.serviceName" placeholder="请输入" style="width:210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">服务器ip：</span>
        <el-input v-model="tableParam.serviceHost" placeholder="请输入" style="width:210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">状态：</span>
        <el-select v-model="tableParam.backupType" placeholder="请选择" style="width:120px">
          <el-option label="全部" :value="null" />
          <el-option label="MYSQL" :value="1" />
          <el-option label="目录下属文件" :value="2" />
          <el-option label="文件" :value="3" />
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="tableParam.page=1,fetchData()">搜索</el-button>
      </div>
    </div>
    <div class="function">
      <el-button v-if="$store.getters.buttonList.includes('dataSource_add')" type="primary" icon="el-icon-plus" size="mini" @click="open('dialog')">添加</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" border :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" tooltip-effect="dark">
      <el-table-column align="center" label="服务器名称" prop="serviceName" />
      <el-table-column align="center" label="服务器ip" prop="serviceHost" />
      <el-table-column align="center" label="服务器agent端口" prop="servicePort" />
      <el-table-column align="center" label="描述" prop="remark" />
      <el-table-column align="center" label="服务器是否保留备份">
        <template slot-scope="scope">
          <span v-if="scope.row.serviceIsSave == 0" style="color: #969799">否</span>
          <span v-if="scope.row.serviceIsSave == 1" style="color: #00a754">是</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="服务器备份文件保留目录" prop="serviceBackupSaveDir" /> -->
      <el-table-column align="center" label="中心否保留备份">
        <template slot-scope="scope">
          <span v-if="scope.row.centreIsSave == 0" style="color: #969799">否</span>
          <span v-if="scope.row.centreIsSave == 1" style="color: #00a754">是</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="中心备份文件保留目录" prop="centreBackupSaveDir" /> -->
      <el-table-column align="center" label="备份类型">
        <template slot-scope="scope">
          {{ scope.row.backupType*1===1?'mysql':scope.row.backupType*1===2?'目录下属文件':'文件' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="140">
        <template slot-scope="scope">
          <el-switch v-if="$store.getters.buttonList.includes('dataSource_status')" v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用" @change="setStatus(scope.row)" />
          <div v-else>
            <el-tag v-if="scope.row.status*1==1" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="link">
            <el-link type="info" @click="open('dialog',scope.row,true)">详情</el-link>
            <el-link v-if="$store.getters.buttonList.includes('dataSource_deit')" type="primary" @click="open('dialog', scope.row,false)">编辑</el-link>
            <el-link v-if="$store.getters.buttonList.includes('dataSource_del')" type="danger" @click="del(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-pagination">
      <el-pagination :current-page.sync="tableParam.page" :page-sizes="[10, 20, 30, 40]" :page-size="tableParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeData" @current-change="fetchData()" />
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchData()">刷新</el-button>
    </div>
    <AllDialog :dialog="dialog" :disabled="disabled" :row="row" @reset="reset" @submit="submit" />
  </div>
</template>

<script>
import { getConfigs, updateConfig, deleteConfig } from '@/api/dataSource'
const AllDialog = () => import('./dialog.vue')
export default {
  name: 'User',
  components: {
    AllDialog
  },
  data() {
    return {
      list: null,
      listLoading: true,
      tableParam: {
        page: 1,
        pageSize: 10,
        serviceName: '',
        serviceHost: '',
        backupType: null
      },
      total: null,
      dialog: false,
      row: null,
      disabled: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    open(key, row, disabled) {
      this.row = row
      this.disabled = disabled
      this[key] = true
    },
    reset(key) {
      this[key] = false
    },
    submit(key) {
      this[key] = false
      this.fetchData()
    },
    setStatus(row) {
      updateConfig({ id: row.id, status: row.status, serviceHost: row.serviceHost, backupType: row.backupType }).then(res => {
        if (res.code * 1 === 200) {
          this.$message({
            message: `状态更新成功`,
            type: 'success',
            showClose: true
          })
          row.updateTime = res.data.updateTime
        }
      }).catch(() => {
        row.status = row.status * 1 === 0 ? 1 : 0
      })
    },
    del(id) {
      this.$confirm(`此操作将删除该任务配置, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteConfig({ id: id }).then(res => {
          if (res.code * 1 === 200) {
            this.$message({
              message: `删除成功`,
              type: 'success',
              showClose: true
            })
            this.fetchData()
          }
        })
      }).catch(() => {
      })
    },
    sizeData(e) {
      this.tableParam.page = 1
      this.tableParam.pageSize = e
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getConfigs(this.tableParam).then(res => {
        this.list = res.data.row
        this.total = res.data.total
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_info {
  height: calc(70vh - 120px);
}
.item {
  padding: 10px 20px;
}
</style>

